<template>
    <view class="container">
        <u-form :model="form" ref="uForm">
            <view class="phone-no">
                <u-input type="text" maxlength="11" placeholder="请输入手机号" clearable=false v-model="form.phoneNumber"/>
                <u-toast ref="uToast"></u-toast>
                <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"/>
                <u-button @click="getCode">{{tips}}</u-button>
            </view>
            <u-line color="#E5E5E5"/>
            <view class="valid-code">
                <u-input type="text" maxlength=6 placeholder="请输入验证码" v-model="form.code"/>
            </view>
            <u-line color="#E5E5E5"/>
        </u-form>
        <view class="login-btn">
            <u-button @click="submit">登录</u-button>
        </view>
        <view class="bottom-login">
            <text style="color:#B8B8B8">登录代表您已同意</text>
            <text style="color:#6C7EA3" @click="protocol">资税通用户服务协议</text>
        </view>
    </view>

</template>

<script>

    export default {
        data() {
            return {
                tips: '',
                seconds: 10,
                merType: '',
                form: {
                    phoneNumber: '',
                    code: ''
                }
            }
        },
        onLoad(option) {
            this.merType = option.merType;
            uni.setStorage({
                key: 'mer_type',
                data: this.merType
            });
        },
        methods: {
            protocol() {
                uni.navigateTo({
                    url: '/pages/login/protocol'
                });
            },
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
                if (this.$refs.uCode.canGetCode) {
                    let phoneNumber = this.form.phoneNumber;
                    if (phoneNumber === '') {
                        this.$u.toast('请输入手机号');
                        return;
                    }
                    // 模拟向后端请求验证码
                    uni.showLoading({
                        title: '正在获取验证码'
                    });
                    this.$sendRequest({
                        url: '/api/wx/getSmsCode',
                        method: 'POST',
                        data: {
                            phoneNumber: phoneNumber
                        },
                        success: (cts) => {
                            uni.hideLoading();
                            // 这里此提示会被this.start()方法中的提示覆盖
                            this.$u.toast('验证码已发送, 10分钟内有效');
                            // 通知验证码组件内部开始倒计时
                            this.$refs.uCode.start();
                        }
                    });
                } else {
                    this.$u.toast('倒计时结束后再发送');
                }
            },
            end() {
                // this.$u.toast('倒计时结束');
            },
            start() {
                // this.$u.toast('倒计时开始');
            },
            submit() {
                let phoneNumber = this.form.phoneNumber;
                let code = this.form.code;
                if (phoneNumber === '' || !new RegExp(/^1[3|4|5|7|8][0-9]{9}$/).test(phoneNumber) || phoneNumber.length !== 11) {
                    this.$u.toast('手机号格式不正确');
                    return;
                }
                if (code === '') {
                    this.$u.toast('验证码不能为空');
                    return;
                }
                this.$sendRequest({
                    url: '/api/wx/register',
                    method: 'POST',
                    data: {
                        phoneNumber: phoneNumber,
                        smsCode: code,
                        merType: this.merType
                    },
                    success: (cts) => {

                        uni.setStorage({
                            key: 'access-token',
                            data: cts.data
                        });
                        if (this.merType === '1') {
                            uni.switchTab({
                                url: "/pages/task/index"
                            });
                        }
                        if (this.merType === '2') {

                            uni.switchTab({
                                url: "/pages/task/merIndex"
                            });
                        }
                    }
                });
            }
        }


    }
</script>

<style lang="scss">

    page{
        background: white;
    }

    .container{

        margin:80rpx 0rpx 40rpx 80rpx;
        width:580rpx;
        input{
            width:400rpx;
        }
        .phone-no{
            margin-bottom: 20rpx;
            display: flex;
            button {
                margin-left: 40rpx;
                background-color: while;
                width:150rpx;
                height: 60rpx;
                font-size: 22rpx;
                color:#CFCFCF;
            }
        }
        .bottom-login{
            font-size:22rpx;
            position: fixed;
            left: 180rpx;
            bottom: 60rpx;
        }
        .login-btn{
            margin-top: 50rpx;
            button {
                background-color: #2979ff;
                width:580rpx;
                color:white;
            }
        }
    }

</style>
